<template>
	<view class="page-message">
		<!-- topbar -->
		<cl-sticky is-topbar>
			<cl-topbar :title="null" :show-back="false" :border="false">
				<view class="content">
					消息
				</view>
				<image src="../../static/icon/service.png" @click="navigateToService"></image>
			</cl-topbar>
		</cl-sticky>

		<!-- list -->
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @tap="navigateToChatDetail(list)"
				@longtap="deletec(list[index].conversationID)">

				<template v-if="item.type=='GROUP' || item.type=='C2C'">
					<!-- 头像 -->
					<view class="avatar">
						<template v-if="item.type=='GROUP'">
							<image lazy-load="true" src="/static/images/match-img.png" mode="aspectFill" />
						</template>
						<template v-else>
							<image lazy-load="true" :src="item.user.head" mode="aspectFill" />
						</template>
						<view class="number" v-if="item.unreadCount!=0">{{ item.unreadCount }}</view>
					</view>

					<view class="content">
						<!-- 昵称，消息 -->
						<view class="info">
							<template v-if="item.type=='GROUP'">
								<text class="name">{{ item.group.name }}</text>
							</template>
							<template v-else>
								<text class="name">{{ item.user.nick }}</text>
							</template>

							<!-- <text class="last">{{ item[index].lastMessage.messageForShow }}</text> -->
						</view>

						<!-- 时间 -->
						<!-- <text class="time">
							{{ item[index].lastMessage.lastTimeFormat }}
						</text> -->
						<text class="time">
							{{ item.createTime }}
						</text>
					</view>
				</template>
			</view>
		</view>

		<view class="kongbai" v-if="list.length == 0">
			<image src="../../static/images/kongbai.png" mode="widthFix"></image>
			<view>还没有消息哦</view>
			<view>赶紧去找几个意中人聊聊天吧~</view>
		</view>

		<delete-conversation ref="deleteConversation"></delete-conversation>
	</view>
</template>

<script>
	import request from '@/common/request.js';
	import deleteConversation from "./components/delete-conversation.vue";

	export default {
		components: {
			deleteConversation
		},
		data() {
			return {
				list: [], // 用于存储从后端获取的消息列表数据
			};
		},
		mounted() {
			this.fetchList(); // 在组件挂载后调用获取消息列表的方法
		},
		methods: {
			fetchList() {
				// 发送请求获取消息列表数据
				request.get('message/list') // 假设接口路径为 /api/message/list
					.then(response => {
						// 请求成功，将返回的消息列表数据赋值给 messageList
						console.log(response[1].data.length);
						this.list = response[1].data;
					})
					.catch(error => {
						// 处理错误
						console.error(error);
					});
			},
			deletec(conversationID) {
				this.$refs.deleteConversation.open(conversationID);
			},
			navigateToChatDetail(item) {
				// 实现导航到聊天详情的逻辑
			},
			deleteConversation(conversationID) {
				// 实现删除会话的逻辑
			},
			navigateToService() {
				// 实现导航到客服页面的逻辑
			},
		},
	};
</script>

<!-- <script>
import deleteConversation from "./components/delete-conversation.vue"
	
export default {
	components:{
		deleteConversation
	},
	data() {
		return {
			tabsActive: "match",
			tabs: [
				{
					label: "聊天",
					name: "match",
				}
			],
			list: [],
		};
	},
	onLoad() {
		let __this = this;
		this.setList();
		uni.$on('conversationUpdate',function(data){
		      __this.setList(); 
		})
	},
	onShow() {
		this.TIM.getConversationList();
	},
	methods: {
		deletec(conversationID){
			this.$refs.deleteConversation.open(conversationID);
		},
		setList(){
			this.list = [
				{type:'GROUP'},
				{userProfile:{avatar:"https://p.qqan.com/up/2020-12/16070652276806379.jpg",nick:"xiaoxiao"}},
				{unreadCount:'2'},
				{groupProfile:{name:"GROUP"}},
				{lastMessage:{messageForShow:'666',lastTimeFormat:'2023-07-10T12:25:40.206+00:00'}}
			];
			console.log(this.list+"....-----")
		},
		activeTabs(item) {
			this.tabsActive = '我爱聊天';
			console.log(this.tabsActive)
		},
		navigateToChatDetail(item){
			var jsonConversationID = '1';
			console.log(jsonConversationID)
			var jsonConversationType = 'GROUP';
			console.log(jsonConversationType)
			
			if(item.type == "GROUP"){
				var jsonUserID = '1';
				var jsonNickName = 'CP交友群';
			}else{
				var jsonUserID = '2';
				var jsonNickName = '2';
			}
			
			uni.navigateTo({
				url:"/pages/chat/detail?userID=" + jsonUserID + "&nickName=" + jsonNickName + "&conversationID=" + jsonConversationID + "&conversationType=" + jsonConversationType
			})
		},
		navigateToService(){
			let jsonUserID = encodeURIComponent(JSON.stringify("51"));
			let jsonNickName = encodeURIComponent(JSON.stringify("cp交友官方客服"));
			let jsonConversationID = encodeURIComponent(JSON.stringify("C2C51"));
			let jsonConversationType = encodeURIComponent(JSON.stringify("C2C"));
			uni.navigateTo({
				url:"/pages/chat/detail?userID=" + jsonUserID + "&nickName=" + jsonNickName + "&conversationID=" + jsonConversationID + "&conversationType=" + jsonConversationType
			})
		},
		async getUserInfoByIdNum(idNums){
			let [err,res] = await this.$http.get1('message/user/getByIdNums',idNums,{
				id_nums: idNums
			});
			
			if(!this.$http.errorCheck(err,res)){
				return;
			}
		},
	},
};
</script> -->

<style lang="scss" scoped>
	.page-message {
		.cl-topbar {
			height: 100rpx;
			padding-left: 30rpx;

			.content {
				font-size: 36rpx;
				font-weight: bold;
				display: inline-block;
			}

			image {
				position: absolute;
				right: 60rpx;
				height: 40rpx;
				width: 40rpx;
			}
		}

		.list {
			padding: 35rpx 30rpx;

			.item {
				display: flex;
				margin-bottom: 32rpx;

				.avatar {
					position: relative;
					width: 90rpx;
					height: 90rpx;
					margin-right: 30rpx;

					image {
						width: 90rpx;
						height: 90rpx;
						border-radius: 50%;
					}

					.number {
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						top: -36rpx;
						right: -24rpx;
						width: 36rpx;
						height: 36rpx;
						background-color: #fe6d73;
						border-radius: 50% 50% 50% 0;
						font-size: 20rpx;
						font-weight: 400;
						color: #ffffff;
					}
				}

				.content {
					display: flex;
					padding-bottom: 25rpx;
					border-bottom: 2rpx solid #ebebeb;
					flex: 1;

					.info {
						flex: 1;

						.name {
							display: block;
							margin-bottom: 14rpx;
							font-size: 25rpx;
							font-weight: 500;
							color: #303030;
						}

						.last {
							font-size: 28rpx;
							font-weight: 400;
							color: #bbbbbb;
						}
					}

					.time {
						font-size: 24rpx;
						font-weight: 400;
						color: #bbbbbb;
					}
				}
			}
		}

		.kongbai {
			position: fixed;
			top: 0rpx;
			bottom: 0rpx;
			left: 0rpx;
			right: 0rpx;
			text-align: center;
			padding-top: 200rpx;
			font-size: 24rpx;

			image {
				width: 500rpx;
			}
		}
	}
</style>